<template>
    <div class="bg">
        <div class="header">
            <div class="header-btnLeft" @click="$router.go(-1)"><img src="../assets/back-btn.png"></div>
            <h1 class="header-title">输入验证码</h1>
            <div class="header-btnRight"></div>
        </div>
        <div class="h120"></div>
        <div class="login">
            <div class="login-item"><input type="text" name="code" v-model="code" placeholder="请输入验证码"/></div>
        </div>

        <div class="login-btn">
            <button class="login-btn-login" @click="nextStep">下一步</button>
        </div>


    </div>
</template>

<script>
    import {Toast} from 'mint-ui';

    export default {
        name: "My-get-password-phone-code",
        data() {
            return {
                code: '',
            }
        },
        methods: {
            nextStep() {
                var code = this.code;
                if (code.length < 4) {
                    Toast({message: '请输入验证码', duration: 1000});
                    return false;
                }

                var params={
                    code:code,
                    telphone:this.phone
                }
                this.axios.post('api/member/checkCode', params)
                    .then(res => {
                        this.$router.push({path:'/my-get-password-set/'+this.phone})
                    })
                    .catch(err => console.log(err));
            },
        },
        mounted(){
            this.phone=this.$route.params.phone;
            console.log(this.phone);
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";

    .bg {
        background: $bgcolor1;
        height: 100%;
    }

    .h30 {
        height: rpx(30);
        background: $bgcolor1
    }

    .h120 {
        height: rpx(120);
        background: $bgcolor1;
    }

    .header {
        display: flex;
        align-items: center;
        padding: rpx(30);
        justify-content: space-between;
        background: $color0;
        &-btnLeft {
            width: rpx(64);
            height: rpx(64);
            padding-top: rpx(16);
            img {
                width: rpx(32);
                height: rpx(32);
            }
        }
        &-btnRight:after {
            display: block;
            content: ' ';
            width: rpx(64);
            height: rpx(64);
        }
        &-title {
            flex: 1;
            font-size: rpx(36);
            text-align: center;
            font-weight: normal;
        }
    }

    .login {
        margin: rpx(30);
        background: $color0;
        &-item {
            border-bottom: solid 1px $color2;
            padding: rpx(20) 0;
            &:last-child {
                border-bottom: none;
            }
            input {
                padding: rpx(10) rpx(30);
                font-size: rpx(34);
            }
        }
        &-btn {
            padding: rpx(30);
            &-login {
                display: block;
                margin-bottom: rpx(30);
                border: none;
                width: 100%;
                height: rpx(100);
                line-height: rpx(100);
                background: $color3;
                border-radius: $radius6;
                color: $color0;
                font-size: rpx(34);
                text-align: center;
            }
        }
    }


</style>